<template>
  <div id="food">
    <food-nav-bar />
    <food-sort-section />
    <food-drop-down
      :sort-container="sortContainer"
      :delivery-modes="deliveryModes"
      :activity-attributes="activityAttributes"
      @handleSortDetailBtn="handleSortDetailBtn"
      @handleSortBtn="handleSortBtn"
      @handleDetermineBtn="handleDetermineBtn"
    />
    <scroll ref="scroll" class="scroll">
      <food-business-list :restaurants="listDisplayData" />
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/betterScroll/Scroll";

import FoodNavBar from "./childComps/FoodNavBar";
import FoodSortSection from "./childComps/FoodSortSection";
import FoodDropDown from "./childComps/FoodDropDown.vue";
import FoodBusinessList from "./childComps/FoodBusinessList";

import {
  getRestaurants,
  getFoodSort,
  getDeliveryModes,
  getActivityAttributes,
} from "network/food.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      sortContainer: [],
      restaurants: [],
      deliveryModes: [],
      activityAttributes: [],
      latitude: 0,
      longitude: 0,
      listDisplayData: [],
      parameterObj: {},
    };
  },
  computed: {
    ...mapGetters(['geohash'])
  },
  mounted() {
    this.latitude = this.geohash.split(",")[0];
    this.longitude = this.geohash.split(",")[1];
    this.getFoodSort(this.latitude, this.longitude);
    this.getRestaurants({
      latitude: this.latitude,
      longitude: this.longitude,
    });
    this.getDeliveryModes(this.latitude, this.longitude);
    this.getActivityAttributes(this.latitude, this.longitude);
  },
  methods: {
    getFoodSort(latitude, longitude) {
      getFoodSort(latitude, longitude).then((res) => {
        this.sortContainer = res;
      });
    },
    getRestaurants(args) {
      getRestaurants(args).then((res) => {
        this.listDisplayData = res;
      });
    },
    getDeliveryModes(latitude, longitude) {
      getDeliveryModes(latitude, longitude).then((res) => {
        this.deliveryModes = res;
      });
    },
    getActivityAttributes(latitude, longitude) {
      getActivityAttributes(latitude, longitude).then((res) => {
        this.activityAttributes = res;
      });
    },
    handleSortDetailBtn(id) {
      this.parameterObj.id = id;
      this.getRestaurants({
        latitude: this.latitude,
        longitude: this.longitude,
        id,
      });
    },
    handleSortBtn(oderBy) {
      this.parameterObj.oderBy = oderBy;
      this.getRestaurants({
        latitude: this.latitude,
        longitude: this.longitude,
        id: this.parameterObj.id,
        oderBy,
      });
    },
    handleDetermineBtn(selectTag) {
      this.getRestaurants({
        latitude: this.latitude,
        longitude: this.longitude,
        id: this.parameterObj.id,
        oderBy: this.parameterObj.oderBy,
        selectTag,
      });
    },
  },
  components: {
    FoodNavBar,
    FoodSortSection,
    FoodDropDown,
    FoodBusinessList,
    Scroll,
  },
};
</script>
<style lang="less" scoped>
#food {
  position: relative;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
  z-index: 1;
  .scroll {
    height: calc(100% - 44px - 37px);
    overflow: hidden;
  }
}
</style>
